// 图片裁剪
let $image = $(".container img");
// 1.2 配置选项
let options = {
    // 纵横比
    aspectRatio: 1,
    preview: '.preview'
};

// 1.3 创建裁剪区域
$image.cropper(options);

// 点击button按钮，触发点击文件选择框
$('#btnChooseImage').on('click', function () {
    $('#file').click()
})
$('#file').on('change', function () {
    const file = this.files[0]
    if (!file) {
        return
    }
    const filesrc = URL.createObjectURL(file)
    $image.cropper('destroy')
        .attr('src', filesrc)
        .cropper(options)
})
// 上传新头像
$('#btnCreateAvatar').on('click', function () {
    // 剪裁得到一张图片（canvas图片）
    let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    })
    let dataURL = base64Str.toDataURL('image/png')
    // console.log(dataURL)

    axios.post("/my/update/avatar", 'avatar=' + encodeURIComponent(dataURL))
        .then(({ data: res }) => {
            console.log(res);
            if (res.status !== 0) {
                return layer.msg(res.message)
            }

            // 调用父页面的函数重新渲染头像
            window.parent.getUserInfo()
        })

})